<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>隐患</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="css/public.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
   <!--统计 top start-->
   <div class="home_tj_top">
       <div class="home_tj_top">
           <p class="home_tj_title">隐患统计</p>
           <div class="home_tj_pic">
               <canvas id="two" width="200" height="200"></canvas>
               <p class="home_wancheng">完成率</p>
           </div>
       </div>
        <ul class="home_tj_fl">
            <li>
                <span>20</span>
                <font>重大隐患</font>
            </li>
            <li>
                <span>20</span>
                <font>重大隐患</font>
            </li>
            <li>
                <span>20</span>
                <font>重大隐患</font>
            </li>
            <li>
                <span>20</span>
                <font>重大隐患</font>
            </li>
            <div class="clear_both"></div>
        </ul>
   </div>
   <!--统计 top end-->
   <!--统计列表start-->
   <div class="home_tj_list">
       <a href="#">
           <img src="images/home_tj_one.png" />
           <span>隐患数量趋势图/月</span>
           <div class="clear_both"></div>
       </a>
       <a href="#">
           <img src="images/home_tj_two.png" />
           <span>隐患数量趋势图/月</span>
           <div class="clear_both"></div>
       </a>
       <a href="#">
           <img src="images/home_tj_three.png" />
           <span>隐患数量趋势图/月</span>
           <div class="clear_both"></div>
       </a>
       <a href="#">
           <img src="images/home_tj_four.png" />
           <span>隐患数量趋势图/月</span>
           <div class="clear_both"></div>
       </a>
   </div>
   <!--统计列表end-->
   <!--foot start-->
   <div class="home_foot">
       <ul>
           <li>
               <a href="hidden_index.html">
                   <img src="images/foot_one.png" />
                   首页
               </a>
           </li>
           <li class="home_foot_on">
               <a href="home_statistics.html">
                   <img src="images/foot_two_on.png" />
                   统计分析
               </a>
           </li>
           <li>
               <a href="library.html">
                   <img src="images/foot_three.png" />
                   隐患库
               </a>
           </li>
           <div class="clear_both"></div>
       </ul>
   </div>
   <!--foot end-->
</body>
</html>
<script>
    function drawCircle(_options){
        var options = _options || {};    //获取或定义options对象;
        options.angle = options.angle || 1;    //定义默认角度1为360度(角度范围 0-1);
        options.color = options.color || '#fff';    //定义默认颜色（包括字体和边框颜色）;
        options.lineWidth = options.lineWidth || 10;    //定义默认圆描边的宽度;
        options.lineCap = options.lineCap || 'square';    //定义描边的样式，默认为直角边，round 为圆角

        var oBoxOne = document.getElementById(options.id);
        var sCenter = oBoxOne.width / 2;    //获取canvas元素的中心点;
        var ctx = oBoxOne.getContext('2d');
        var nBegin = Math.PI / 2;    //定义起始角度;
        var nEnd = Math.PI * 2;    //定义结束角度;
        var grd = ctx.createLinearGradient(0, 0, oBoxOne.width, 0);    //grd定义为描边渐变样式;
        grd.addColorStop(0, 'red');
        grd.addColorStop(0.5, 'yellow');
        grd.addColorStop(1, 'green');

        ctx.textAlign = 'center';    //定义字体居中;

        ctx.font = 'normal normal bold 36px Arial';    //定义字体加粗大小字体样式;
        ctx.fillStyle = options.color = '#ffc106';    //判断文字填充样式为颜色，还是渐变色;

        console.log(options.font);
        ctx.fillText((options.angle * 100) + '%', sCenter, 90);    //设置填充文字;

        /*ctx.strokeStyle = grd;    //设置描边样式为渐变色;
        ctx.strokeText((options.angle * 100) + '%', sCenter, sCenter);    //设置描边文字(即镂空文字);*/
        ctx.lineCap = options.lineCap;
        ctx.strokeStyle = options.color == '#00d7e6';
        ctx.strokeStyle = options.color == '#00d7e6';
        ctx.lineWidth = options.lineWidth;

        ctx.beginPath();    //设置起始路径，这段绘制360度背景;
        ctx.strokeStyle = '#fff';
        ctx.arc(sCenter, sCenter, (sCenter - options.lineWidth), -nBegin, nEnd, false);
        ctx.stroke();

        var imd = ctx.getImageData(0, 0, 240, 240);
        function draw(current) {    //该函数实现角度绘制;
            ctx.putImageData(imd, 0, 0);
            ctx.beginPath();
            ctx.strokeStyle = options.color == 'grd' ? grd : '#00d7e6';
            ctx.arc(sCenter, sCenter, (sCenter - options.lineWidth), -nBegin, (nEnd * current) - nBegin, false);
            ctx.stroke();
        }
        var t = 0;
        var timer = null;
        function loadCanvas(angle) {    //该函数循环绘制指定角度，实现加载动画;
            timer = setInterval(function(){
                if (t > angle) {
                    draw(options.angle);
                    clearInterval(timer);
                }else{
                    draw(t);
                    t += 0.02;
                }
            }, 20);
        }
        loadCanvas(options.angle);    //载入百度比角度  0-1 范围;
        timer = null;
    }
    drawCircle({
        id: 'two',
        angle: 0.5,
        color: '#00d7e6',
        lineWidth: 16
    });
</script>
